<template>
  <div id="backAll" style="height: 100%;">
    <h1>咱们开始吧！</h1>
  </div>
</template>

<script>
  import Vue from 'vue'
  //import element from 'element-ui'
  //import '../../assets/theme/element-#409eff/index.css'
  import qs from 'qs';
  //Vue.use(element)
  require('echarts/theme/dark');
  //import  LwMap from '../base/LwMap'
  export default{
    components: {
      //LwMap: LwMap
    },
    data(){
      return {
        //mdata:this.GLOBAL.mdata,
        //queryLyrUrl2: this.GLOBAL.queryLyrUrl2,
        //queryField2: this.GLOBAL.queryField2,
        //queryStr2: '',
        //filterLyrs:this.GLOBAL.filterLyrs4Use.home,

        outerVisible: false,
        innerVisible: false,

        testDialogVisible: false,
        centerDialogVisible: false,
        towns: [
          {value:"文城镇"},
          {value:"重兴镇"},
          {value:"蓬莱镇"},
          {value:"会文镇"},
          {value:"东路镇"},
          {value:"潭牛镇"},
          {value:"东阁镇"},
          {value:"文教镇"},
          {value:"东郊镇"},
          {value:"龙楼镇"},
          {value:"昌洒镇"},
          {value:"翁田镇"},
          {value:"抱罗镇"},
          {value:"冯坡镇"},
          {value:"锦山镇"},
          {value:"铺前镇"},
          {value:"公坡镇"},
          ],
        selectTownmddcValue:'',
        selectTowntbzgValue:'',
        items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
        /* 图斑统计分析 【不同类型的图斑数据】*/
        item0:[315,530,599,49,539,136,75,882,105,867,38,756,397,713,582,594,383],
        item1:[531,358,188,507,514,767,280,324,882,647,380,701,446,719,468,850,197],
        item2:[775,683,380,166,356,908,752,983,744,878,879,986,727,152,132,671,481],
        item3:[906,174,635,517,896,128,372,232,679,462,263,108,893,461,696,343,756],

        /* 图斑整改统计【不同类型图斑数量】 */
        wcstbInvestigateBase:[
          {value:335, name:'未采集图斑数量'},
          {value:310, name:'自查图斑数量'},
          {value:234, name:'调整图斑数量'},
          {value:1548, name:'已采集图斑数量'}],
        wcstbInvestigateBase1:[
          {value:3235, name:'未采集图斑数量'},
          {value:3310, name:'自查图斑数量'},
          {value:2314, name:'调整图斑数量'},
          {value:148, name:'已采集图斑数量'}],

        /* 图斑整改统计 */
        wcstbRectification:[
          {value:335, name:'待计划处置的图斑数量'},
          {value:310, name:'待下发整改的图斑数量'},
          {value:234, name:'整改中的图斑数量'},
          {value:135, name:'整改完成图斑数量'},
          {value:1548, name:'消除图斑数量'},
        ],
        wcstbRectification1:[
          {value:35, name:'待计划处置的图斑数量'},
          {value:10, name:'待下发整改的图斑数量'},
          {value:34, name:'整改中的图斑数量'},
          {value:13, name:'整改完成图斑数量'},
          {value:15, name:'消除图斑数量'},
        ],
      }
    },
    mounted(){

    },
    methods:{
      //疑似图斑统计分析
      wcstbStaAnal(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChartwcsystbtj'), 'dark')
        // 绘制图表
        myChart.setOption({
          title: {
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid:{
            top:"50px",
            left:"50px",
            right:"15px",
            // bottom:"50px"
          },
          legend: {
            data:["下发图斑数量"],
            left:400,
            top:5,
          },
          xAxis : [
            {
              data : ['抱罗镇',	'昌洒镇',	'东阁镇',	'东郊镇',	'东路镇',	'冯坡镇',	'公坡镇',	'会文镇',	'锦山镇',	'龙楼镇',	'蓬莱镇',
                '铺前镇',	'潭牛镇',	'文城镇',	'文教镇',	'翁田镇',	'重兴镇',	'罗豆农场'],
              axisLabel:{
                interval: 0,
                rotate: 45,
              },

            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name: '下发图斑数量',
              type: 'bar',
              data: this.item0,
              itemStyle:{
                normal:{color:"#53A8E2"},
              },
              // width:1
              barGap: 0,
            },
          ]
        });
      },

      //图斑调查摸底统计
      wcstbInvestigateBaseStaAnal(){
        let myChart = this.$echarts.init(document.getElementById('myChartwcstbdcmdtj'), 'dark');
        myChart.setOption({
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },

          legend: {
            orient : 'vertical',
            left:'70%',
            top:70,
            data:['未采集图斑数量','自查图斑数量','调整图斑数量','已采集图斑数量']
          },
          calculable : true,
          series : [
            {
              name:'图斑调查摸底统计',
              type:'pie',
              radius : ['40%', '70%'],
              center: ['30%', '60%'],
              itemStyle : {
                normal : {
                  label : {
                    show : false
                  },
                  labelLine : {
                    show : false
                  },
                },
                // emphasis : {
                //   label : {
                //     show : true,
                //     position : 'center',
                //     textStyle : {
                //       fontSize : '15',
                //       fontWeight : 'bold'
                //     }
                //   }
                // }
              },
              data: this.wcstbInvestigateBase,
            }
          ],
          color:['#FE8463',
            '#9BCA63',
            '#FAD860',
            '#0284C6']
        });
      },

      test1(){
        this.wcstbInvestigateBaseStaAnal(this.wcstbInvestigateBase1);
      },

      //图斑整改统计
      wcstbRectificationStaAnal(){
        let myChart = this.$echarts.init(document.getElementById('myChartwcstbzgtj'), 'dark');
        myChart.setOption({
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient : 'vertical',
            left:'70%',
            top: 65,
            data:['待计划处置的图斑数量','待下发整改的图斑数量','整改中的图斑数量','整改完成图斑数量','消除图斑数量',]
          },
          calculable : true,
          series : [
            {
              name:'图斑整改统计',
              type:'pie',
              radius : '70%',
              center: ['30%', '60%'],
              label:{
                normal:{
                  position:'inner',
                  show:false,
                }
              },
              data:this.wcstbRectification,
            }
          ],
          color:['#F18361','#9BCA63','#FAD860','#60C0DD','#2D84C6',]

        });
      },

      test2(){
        this.wcstbRectificationStaAnal(this.wcstbRectification1);
      },

      //获取页面数据
      getAllData(){
        this.axios.post(this.$baseUrl+'/statistic/zeroStatistic').then((response) =>{
          console.log(response.data.data);

          //疑似图斑统计
          //region
          this.item0 = [];
          for(var i=0; i<19; i++){
            this.item0[i] = 0;
          }
          //console.log(response.data,888)
          this.item0[0] = response.data.data.抱罗镇;
          this.item0[1] = response.data.data.昌洒镇;
          this.item0[2] = response.data.data.东阁镇;
          this.item0[3] = response.data.data.东郊镇;
          this.item0[4] = response.data.data.东路镇;
          this.item0[5] = response.data.data.冯坡镇;
          this.item0[6] = response.data.data.公坡镇;
          this.item0[7] = response.data.data.会文镇;
          this.item0[8] = response.data.data.锦山镇;
          this.item0[9] = response.data.data.龙楼镇;
          this.item0[10] = response.data.data.蓬莱镇;
          this.item0[11] = response.data.data.铺前镇;
          this.item0[12] = response.data.data.潭牛镇;
          this.item0[13] = response.data.data.文城镇;
          this.item0[14] = response.data.data.文教镇;
          this.item0[15] = response.data.data.翁田镇;
          this.item0[16] = response.data.data.重兴镇;
          this.item0[17] = response.data.data.罗豆农场;
          // this.item0[18] = response.data.data.三角庭农场;

          this.wcstbStaAnal();
          //endregion
          //图斑调查统计摸底
          //region
          //['未采集图斑数量','自查图斑数量','调整图斑数量','已采集图斑数量']
          this.wcstbInvestigateBase[0].value = response.data.data.weiCaiJi;
          this.wcstbInvestigateBase[1].value = response.data.data.zicha;
          this.wcstbInvestigateBase[2].value = response.data.data.tiaozheng;
          this.wcstbInvestigateBase[3].value = response.data.data.yiCaiji;
          this.wcstbInvestigateBaseStaAnal();
          //endregion


          //图斑整改统计
          //region
          //['待计划处置的图斑数量','待下发整改的图斑数量','整改中的图斑数量','整改完成图斑数量','消除图斑数量',]
          this.wcstbRectification[0].value = response.data.data.weiJiHua;
          this.wcstbRectification[1].value = response.data.data.daiXiafa;
          this.wcstbRectification[2].value = response.data.data.zhengGaiZhong;
          this.wcstbRectification[3].value = response.data.data.yiZhengGai;
          this.wcstbRectification[4].value = response.data.data.xiaoHao;
          this.wcstbRectificationStaAnal();
          //endregion
        });
      },

      //检查返回数据是否为空
      checkReturnDataUndefine(returnData){
        if(returnData == undefined){
          return 0;
        } else{
          return returnData;
        }
      }
    },
    created(){
      //this.getAllData();
    }
  }
</script>

<style scoped>
  body html{
    height:100%;
    width:100%;
  }

  /*疑似图斑统计*/
  #wcsystbtj{
    width: 552px;
    height: 30%;
    /*margin-bottom: 20px;*/
    float: left;
    margin-left: 20px;
  }
  #myChartwcsystbtj{
    width: 100%;
    height: 90%;
    border: 2px solid rgba(0, 194, 195, 1);
    z-index: 999;
    /*box-shadow: 0px 0px 6px 0px rgba(0, 194, 195, 1), inset 0px 0px 6px 2px rgba(79, 211, 215, 1);*/
  }

  /*图斑调查摸底统计*/
  #wcstbdcmdtj{
    width: 552px;
    height: 30%;
    background-color: #030829;
    margin-top: 20px;
    float: left;
    margin-left: 20px;
  }
  #titlewcstbdcmdtj{
    height: 40px;
    text-align: left;
    line-height: 40px;
    border: 1px solid rgba(0, 194, 195, 1);
    background-color: black;
    color: rgba(0, 194, 195, 1);
    padding-left: 45%;
  }
  #myChartwcstbdcmdtj{
    width: 100%;
    height: 90%;
    background-color: #333333;
    border: 2px solid rgba(0, 194, 195, 1);
    box-shadow: 0px 0px 6px 0px rgba(0, 194, 195, 1);
    /*background-color: #9e9d24;*/
  }

  /* 图斑整改统计 */
  #wcstbzgtj{
    width: 552px;
    height: 30%;
    background-color: #030829;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
  }
  #titlewcstbzgtj{
    height: 40px;
    text-align: left;
    line-height: 40px;
    border: 1px solid rgba(0, 194, 195, 1);
    background-color: black;
    color: rgba(0, 194, 195, 1);
    padding-left: 45%;
  }
  #myChartwcstbzgtj{
    width: 100%;
    height: 90%;
    background-color: #333333;
    border: 2px solid rgba(0, 194, 195, 1);
  }

  .el-aside {
    background-color: #030829;
    text-align: center;
    width: 600px;
    /*background-color: red;*/
    /*height: 100px;*/
  }
  .el-main {
    background-color: #030829;
    color: #333;
    text-align: center;
  }
  .center_title {
    display: inline-block;
    vertical-align: top;
    background: #B373DA;
    height: 40px;
    width:100%;
    background-color: #030829;
    /*border: 2px solid rgba(0, 194, 195, 1);*/
    margin-top: 10px;
    text-align: center;
    margin-left: -10px;
    margin-bottom: 8px;
  }
</style>






